<template>
  <div class="word-count">
    <el-tag type="info" size="small">
      <el-icon><Document /></el-icon>
      <span class="count-text">{{ count }} 字</span>
    </el-tag>
  </div>
</template>

<script>
import { Document } from '@element-plus/icons-vue'

export default {
  name: 'WordCount',
  components: {
    Document
  },
  props: {
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.word-count {
  .el-tag {
    .el-icon {
      vertical-align: middle;
      margin-right: 5px;
    }

    .count-text {
      font-weight: bold;
    }
  }
}
</style>
